<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title>8.1</title>
<style type="text/css">
       *{margin:0;padding:0;}
       .layer1{width:100%; height:100px;  background:blue;color:white;text-align:center;}
           .layer1-1{width:50%; height:100px; background:#C3C;text-align:center;float:left;}  
           .layer1-2{width:50%; height:100px; background:#FF0;text-align:center;float:left;} 
		   .layer1-3{clear:both;}   
	   .layer2{width:100%; height:400px; background:yellow;color:blue;text-align:center;text-align:center;}
	       .layer2-1{width:100%; height:200px; background:red;text-align:center;}
		      .layer2-1-1{width:33%;height:200px;background:#0FF;float:left}
			  .layer2-1-2{width:33%;height:200px;background:#C96;float:left}  
			  .layer2-1-3{width:34%;height:200px;background:#CF6;float:left}
			  .layer2-1-4{clear:both}
		  .layer2-2{width:100%; height:200px; background:orange;text-align:center;}
		      .layer2-2-1{width:100%; height:100px; background:pink;text-align:center;} 
			  .layer2-2-2{width:100%; height:100px; background:#06F;text-align:center;}
			  .layer2-2-3{clear:both}
	   .layer3{width:100%; height:130px;  background:green;color:white;text-align:center;} 
 </style>
</head>
 <body>    
<div class="layer1">
 <div class="layer1-1"></div>
   <div class="layer1-2"></div>
   <div class="layer1-3"></div>
<div class="layer2">
   <div class="layer2-1">
       <div class="layer2-1-1"></div>
       <div class="layer2-1-2"></div>
       <div class="layer2-1-3"></div>
 </div>
   <div class="layer2-2">
       <div class="layer2-2-1"></div>
       <div class="layer2-2-2"></div>
   </div>
     <div class="layer3"></div>
 </body>
 <html>